<template>
    <div class="button-container mt-3">
        <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn" :class="active === 0 ? 'btn-primary' : 'btn-secondary'"
                @click="onBtnClick(0)">全部</button>
            <button type="button" class="btn" :class="active === 1 ? 'btn-primary' : 'btn-secondary'"
                @click="onBtnClick(1)">已完成</button>
            <button type="button" class="btn" :class="active === 2 ? 'btn-primary' : 'btn-secondary'"
                @click="onBtnClick(2)">未完成</button>
        </div>
    </div>

</template>

<script>
export default {
    name: "todoButton",
    props: {
        active: {
            type: Number,
            required: true,
            // 默认激活的数值 0(全部) 1(完成) 2(未完成)
            default: 0
        }
    },
    methods: {
        onBtnClick(btnIndex) {
            if (btnIndex === this.active) return
            this.$emit("update:active", btnIndex)
        }
    },
    // 子组件传值，v-model实时更新
    emits: ["update:active"]

}
</script>

<style lang="less" scoped>
.button-container {
    width: 400px;
    text-align: center;
}
</style>